<!-- 权限管理 -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 引入导航栏组件，只显示右侧按钮 -->
      <PageTools :show-before="true">
        <template #before>权限管理</template>
        <template #after>
          <!-- 添加的是一级pid=0 -->
          <el-button type="primary" size="small" @click="addPermission(1, '0')"
            >添加权限</el-button
          >
        </template>
      </PageTools>
      <!-- 表格 -->
      <!-- row-key="id" 将表格变为树表，指定id为唯一标识 -->
      <!-- 当type为1时为访问权限，type为2时为功能权限 -->
      <el-table :data="list" border style="width: 100%" row-key="id">
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column align="center" prop="code" label="标识">
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <!-- 添加 -->
            <!-- 添加按钮只在访问权限的层级显示，只有当type===1的时候在显示 -->
            <!-- 添加的是子节点，pid等于父节点的id -->
            <el-button
              v-show="row.type === 1"
              type="primary"
              icon="el-icon-plus"
              size="small"
              circle
              @click="addPermission(2, row.id)"
            ></el-button>
            <!-- 编辑 -->
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              circle
              @click="editPermission(row.id)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              circle
              @click="delPermission(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加权限弹窗 -->
      <el-dialog
        :title="formData.id ? '编辑权限' : '新增权限'"
        :visible.sync="showDialog"
        width="60%"
        @close="btnCancel"
      >
        <!-- 表单 -->
        <el-form
          ref="perForm"
          :model="formData"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" style="width: 90%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" style="width: 90%" />
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="formData.description" style="width: 90%" />
          </el-form-item>
          <el-form-item label="开启">
            <!-- 当enVisible的值为1的时候激活，当值为0的时候不激活-->
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPermissionListAPI,
  delPermissionAPI,
  addPermissionAPI,
  updatePermissionAPI,
  getPermissionDetailById
} from '@/api/permission'
import { tranListToTreeData } from '@/utils' // 将数据转化为树形结构的方法
export default {
  data() {
    return {
      list: [], // 表格数据
      showDialog: false, // 控制添加权限弹窗的显示和隐藏
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 默认不激活
      },
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    // 获取权限列表
    async getPermissionList() {
      const res = await getPermissionListAPI()
      // console.log('权限点', res.data)
      this.list = tranListToTreeData(res.data, '0') // 这里根的pid是‘0’
    },
    // 由上角添加权限
    addPermission(type, id) {
      // 访问权的type=1，按钮操作权type=2
      // 子节点的pid等于父节点的id
      // id表示当前数据的父节点的标识
      // 需要记录当前添加的类型和父标识
      this.formData.type = type
      this.formData.pid = id
      this.showDialog = true
    },
    // 确定
    btnOk() {
      this.$refs.perForm.validate(async (isOk) => {
        if (!isOk) return false
        // 有id就是编辑
        if (this.formData.id) {
          // 更新
          const res = await updatePermissionAPI(this.formData)
          // console.log('更新', res)
          if (!res.success) return this.$message.error(res.message)
          this.$message.success(res.message)
        } else {
          // 新增
          const res = await addPermissionAPI(this.formData)
          // console.log('新增', res)
          if (!res.success) return this.$message.error(res.message)
          this.$message.success(res.message)
        }
        this.showDialog = false
        this.getPermissionList()
      })
    },
    // 编辑
    async editPermission(id) {
      const res = await getPermissionDetailById(id)
      // console.log('编辑', res.data)
      // 回显数据
      this.formData = res.data
      this.showDialog = true
    },
    // 取消
    btnCancel() {
      this.$refs.perForm.resetFields() // 重置校验字段
      this.formData = {}
      this.showDialog = false
    },
    // 删除权限
    async delPermission(id) {
      // 询问用户是否删除
      const confirmResult = await this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      // 取消了删除
      if (confirmResult === 'cancel') return this.$message.warning('取消了删除')
      const res = await delPermissionAPI(id)
      // console.log('删除成功', res)
      if (!res.success) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getPermissionList()
    }
  }
}
</script>

<style></style>
